<template>
    <!-- ytq编辑优惠券 -->
    <div class="addProduct">
        <div class="breadcrumb">
            <Breadcrumb :aaa='aaa' :msgg="msg" :txt="txt" :path1="path1" />

        </div>

        <div class="form-container">
            <el-card body-style="padding-bottom:35px">
                <!-- 内容 -->
                <div class="el-card__body">
                    <!-- 输入框 -->
                    <el-form v-for="item in couponDetailArr" :key="item.id" label-width="140px">
                        <!-- 1 -->
                        <el-form-item label="优惠券类型：">
                            <el-select v-model="type">
                                <el-option prop="" label="全场赠券" value="0" />
                                <el-option prop="" label="会员赠券" value="1" />
                                <el-option prop="" label="购物赠券" value="2" />
                                <el-option prop="" label="注册赠券" value="3" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠券名称：">
                            <el-input type="text" v-model="item.name"></el-input>
                        </el-form-item>
                        <el-form-item label="适用平台：">
                            <el-input type="text" v-model="platform"></el-input>
                        </el-form-item>
                        <el-form-item label="总发行量：">
                            <el-input type="text" v-model="item.publishCount"></el-input>
                        </el-form-item>
                        <el-form-item label="面额：">
                            <el-input prepend="append" v-model="item.amount">
                                <template #append>元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="每人限领：">
                            <el-input prepend="append" v-model="item.perLimit">
                                <template #append>张</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="使用门槛：">
                            <el-input prepend="append" v-model="item.minPoint">
                                <template #prepend>满</template>
                                <template #append>元可用</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="领取日期：">
                            <el-date-picker v-model="item.enableTime" type="date" placeholder="请选择时间" />
                        </el-form-item>
                        <el-form-item label="有效期：">
                            <el-date-picker v-model="item.startTime" type="date" />&nbsp;&nbsp;至&nbsp;&nbsp;
                            <el-date-picker v-model="item.endTime" type="date" />
                        </el-form-item>
                        <el-form-item label="可使用商品：">
                            <div class="demo-button-style">
                                <el-checkbox-group v-model="checkboxGroup4" size="small">
                                    <el-checkbox-button v-for="discountWay in usePro" :key="discountWay"
                                        :label="discountWay">{{ discountWay }}</el-checkbox-button>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                        <el-form-item label="备注:">
                            <el-input type="textarea" class="textarea" v-model="item.note" />
                        </el-form-item>
                        <el-button type="primary" style="margin-left: 140px" @click="submit">提交
                        </el-button>
                    </el-form>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive,
    watch,
    onBeforeUnmount,
    shallowRef,
    onMounted,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as api from "../../request/api";
import Breadcrumb from '../../components/breadcrumb.vue'
import { useRoute } from 'vue-router';
let msg = ref('编辑优惠券')
let txt = ref('营销')
let path1 = ref('sms/flash')
let aaa = ref(0)

const type = ref("0"); //优惠券类型
const name = ref("手机品类专用券"); //优惠券名称 备注
const platform = ref("全平台"); //适用平台
const publishCount = ref("100"); //总发行量
const amount = ref("300"); //面额
const perLimit = ref("1"); //每人限领
const minPoint = ref("2000"); //使用门槛
const enableTime = ref("2018-08-27T08:40:47.000+00:00"); //领取日期
const startTime = ref("2021-08-11T16:00:00.000+00:00"); //有效期
const endTime = ref("2021-08-30T16:00:00.000+00:00"); //有效期
const checkboxGroup4 = ref(["全场通用"]); //可使用商品
const usePro = ["全场通用", "指定分类", "指定商品"]; //可使用商品


//跳转
const route = useRoute()
let id = route.query.id
let couponDetailArr = reactive([])
let onOwn = async () => {
    let detailData = await api.coupon.couponDetail({ id })

    couponDetailArr.push(detailData)
}
onOwn()
//提交 编辑
let submit = () => {
    ElMessageBox.confirm("是否要提交数据? ", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        //编辑
        let EditData = await api.coupon.couponEdit({
            id
            // ,amount, code, count, enableTime, endTime, memberLevel, minPoint, name, note, perLimit, platform, productCategoryRelationList, productRelationList, publishCount, receiveCount, startTime, type, useCount, useType
        })
        console.log(EditData)
        ElMessage({
            type: "success",
            message: "编辑成功",
        });
    })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消提交",
            });
        });
};



</script>

<style lang="scss" scoped>
.el-input,
.textarea {
    width: 340px;
}

.send {
    margin-left: 23px;
}

.form-container {
    left: 0;
    right: 0;
    width: 720px;
    padding: 27px 35px 15px 35px;
    margin: 20px auto;
    width: 820px;
}

.addProduct {
    background-color: white;
    height: 100vh;
}

.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.f {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 20px;
}

.el-input-group {
    width: 60%;
}

.breadcrumb {
    height: 45px;
    border-bottom: 1px solid #ebeef5;
    font-size: 20px;
}

.el-card.is-always-shadow {
    box-shadow: none;
}

/* .el-card__body {
    padding: 50px 30px !important;
    width: 720px;
} */

.el-card {
    border-radius: 4px;
    border: 1px solid#ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
}

////
.form-container {
    left: 0;
    right: 0;
    width: 720px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
}

.el-card {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
}

/* .el-card__body {
    padding: 20px;
} */

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 18px;
}
</style>
